<template>
    <div class="layout">
        <Layout>
            <Header>
                <Menu mode="horizontal" theme="dark" >
                    <MenuItem class="layout-logo" ><p><svg class="icon" aria-hidden="true"><use xlink:href="#iconzhongguojie"></use></svg>学生页面</p></MenuItem>
                    <div class="layout-nav">
                        <MenuItem ><svg class="icon" aria-hidden="true"><use xlink:href="#iconxuesheng"></use></svg></MenuItem>
                        <MenuItem >
                            学生号:
                            {{studentInfo.studentnum}}
                        </MenuItem>
                        <MenuItem >
                            学生姓名:
                            {{studentInfo.userName}}
                        </MenuItem>
                        <MenuItem >
                            专业:
                            {{studentInfo.major}}
                        </MenuItem>
                         <MenuItem @click.native="loginout">
                           退出
                        </MenuItem>
                    </div>
                </Menu>
            </Header>
         <div class='flex1' ><Layout class='flex2'>
                <Sider hide-trigger :style="{background: '#fff'}" >
                    <Menu active-name="1-1" theme="light" width="auto" :open-names="['1']">
                        <Submenu name="1">
                            <template slot="title" >
                                 <Icon custom="iconfont iconkaoshixinxi" size="24" />
                                考试信息
                            </template>
                            <MenuItem name="1-1"  class="box" @click.native="componentId='StudentExamPages'" >待考信息</MenuItem>
                            <MenuItem name="1-2" class="box" @click.native="componentId='StudentAnsweredMsg'">考完试卷信息</MenuItem>
                            <MenuItem name="1-3">更多</MenuItem>
                        </Submenu>
                        <Submenu name="2">
                            <template slot="title">
                                <Icon custom="iconfont iconshuju" size="24" />
                                数据分析
                            </template>
                            <MenuItem name="2-1"  @click.native="componentId='studentAllscoresChart'">试卷数据分析</MenuItem>
                            <MenuItem name="2-2">更多</MenuItem>
                        </Submenu>
                        <Submenu name="3">
                             <template slot="title">
                              <Icon custom="iconfont icontikuguanli" size="24" />
                                题库
                            </template>
                            <MenuItem name="3-1">Option 1</MenuItem>
                            <MenuItem name="3-2">Option 2</MenuItem>
                        </Submenu>
                    </Menu>
                </Sider>
               </Layout>
                <Layout :style="{padding: '10px 10px 10px'}" class='bgc' >
                    <Content :style="{padding: '10px', minHeight: '420px', background: '#fff'}" >
                        <transition mode="out-in">
                        <component :is="componentId" v-if='major'  :major='major' :studentName='studentName'></component>
                        </transition>
                    </Content>
            </Layout></div>
        </Layout>
    </div>
</template>
<script>
import StudentExamPages from './studentExamPages.vue'
import StudentAnsweredMsg from './studentAnsweredMsg.vue'
import studentAllscoresChart from './studentAllscoresChart.vue'
export default {
    components:{
      'StudentExamPages' : StudentExamPages,
      'StudentAnsweredMsg': StudentAnsweredMsg,
      'studentAllscoresChart':studentAllscoresChart
    },
  data() {
    return {
        componentId:'StudentExamPages',
        major:'',
        studentName:'',
        studentInfo: [],
    };
  },
  beforeMount() {
       this.getStudentInfo();
  },
  methods: {
    getStudentInfo() {
      const studentname = sessionStorage.getItem('studentName')
      this.studentName=studentname
      var studentMsg = { userName: studentname };
      this.$axios({
        method: "post",
        url: "http://"+this.urlpath+"/FindOne",
        data: studentMsg
      }).then(res => {
        this.studentInfo=res.data;
        sessionStorage.setItem('major',res.data.major)
        this.major=res.data.major
      });
    },
     loginout(){
        this.$router.push('/')
         sessionStorage.setItem("studentName", '');
      
     }
  }
  
};
</script>
<style scoped>
.layout{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #f5f7f9;
    overflow: hidden;
}
  .layout-logo Header{
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;   
  }
 
  .flex1{
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row
  }
  .flex2{
      width: 18%;
  }

.layout-logo p{
 font-size: 20px;
 color:aliceblue;
 font-family: "Microsoft YaHei";
 letter-spacing: 5px
}
.layout-nav{
    width: 100%;
    margin: 0 auto;
    margin-right: 20px;
}
.bgc{
  height: 100%;
  width: 100%;

}
   .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(10px);
    }

    .v-enter-active,
    .v-leave-active {
      transition: all 0.1s ease;
    }
  .icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>